<template>
  <view class="button_box">
    <view class="content" :class="props.isBottom ? 'fixed' : ''">
      <view
        class="msg"
        @click="onClick"
        :style="{ backgroundColor: props.isDisable ? 'rgb(182, 179, 179)' : props.backColor }"
      >
        {{ props.msg }}
      </view>
    </view>
  </view>
</template>

<!-- 点击按钮组件 -->
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import type { PropType } from 'vue'

//自定义事件
const emit = defineEmits<{
  /**
   * 按钮点击
   */
  (e: 'onClick'): void
}>()

//接受父组件参数
const props = defineProps({
  /**
   * 是否开启置顶底部
   */
  isBottom: {
    type: Boolean,
    default: true,
  },
  /**
   * 按钮类型 默认普通按钮 orders 跳转订单 pay 跳转支付 booking-look-house 预约看房
   */
  openType: {
    type: String as PropType<'orders' | 'booking-look-house' | 'pay' | "bth">,
    default: "bth",
  },
  /**
   * 按钮文字信息
   */
  msg: {
    type: String,
    default: '提交',
  },
  /**
   * 按钮背景颜色,默认橙黄色
   */
  backColor: {
    type: String,
    default: 'rgb(244, 142, 33)',
  },
  /**
   * 是否禁用
   */
  isDisable: {
    type: Boolean,
    default: false,
  },
})

//监听点击事件
const onClick = () => {
  if (props.isDisable) {
    return
  }
  //如果是普通按钮，则响应提交
  if (props.openType == 'bth') {
    emit('onClick')
    return
  }
  //检查是否登录
  if (useUserStore().userInfo.userId == 0) {
    uni.navigateTo({ url: '../../subpkg/login/login' })
    return
  }
  switch (props.openType) {
    case 'orders':
      //跳转详情
      break
    case 'pay':
      //触发支付
      break
    case 'booking-look-house':
      //触发预约看房
      break
    default:
  }
}
</script>

<style scoped lang="scss">
.button_box {
  width: 100%;
  height: 146rpx;
  .content {
    width: calc(100% - 70rpx);
    height: 90rpx;
    padding: 16rpx 35rpx 30rpx;
    background-color: $uni-bg-color;

    .msg {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      color: rgb(253, 252, 250);
      border-radius: 12rpx;
      transition: all 0.2s;
      font-size: 30rpx;
    }

    .msg:active {
      opacity: 0.8;
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 98;
  }
}
</style>
